<template>
  <el-container class="container">
    <el-header>
      <font class="title">大华医卫后台管理系统</font>
    </el-header>
    <el-main>
      <el-container
        direction="vertical"
        class="login-wrapper"
        >
        <h2 class="title">登录</h2>
        <el-input
          placeholder="请输入用户名"
          v-model="user"
          prefix-icon="el-icon-user"
          clearable
        >
        </el-input>
        <font v-show="!user" class="tips">输入用户名为空</font>
        <el-input
          placeholder="请输入密码"
          v-model="pwd"
          show-password
          prefix-icon="el-icon-lock"
        ></el-input>    
        <font v-show="!pwd" class="tips">输入密码为空</font>
        <el-button type="primary" class="btn" @click="login">登录</el-button>
      </el-container>
      <PwdInput></PwdInput>
    </el-main>
  </el-container>
</template>
<script>
export default {
  name: "Login",
  components: {},
  data(){
      return{
          user:'',
          pwd:''
      }
  },
  methods:{
      login(){
          if(this.user && this.pwd) {
              console.log(this.user,this.pwd)
              this.$router.push({
                  path:'/home'
              })
          }else{
              alert('登录失败');
          }
      }
  }
};
</script>
<style scoped>
.tips{
    color: rgb(219, 3, 3);
}
.btn{
    background-color:rgb(88, 177, 149) ;
    width: 60%;
    margin: 30px auto 0 auto;

}
.login {
  height: 100;
  border: 1px solid red;
}
.container {
  background-color: rgb(177, 216, 203);
  height: 100%;
}
.el-header {
  height: fit-content !important;
}
.el-main {
  width: fit-content !important;
  margin: 50px auto 0 auto;
}
.title {
  display: block;
  margin-top: 15px;
  font-size: 35px;
  color: rgb(0, 54, 61);
}
.el-input{
    margin-top: 30px;
}
.login-wrapper{
    border: 5px solid rgb(1, 48, 54);
    border-radius: 15%;
    padding: 10px 30px 50px 30px; 
    height: fit-content;
}
</style>